<template>
  <div>
    <el-dialog :title="titleRegion" append-to-body :close-on-click-modal="false" @close="closeDialog()"
      v-model="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
        label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商家名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="至少输入2个字"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商家地址" prop="address">
              <el-input v-model="dataForm.address" placeholder="商家地址长度不能超过100个字"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="登入账号" prop="loginName">
              <el-input v-model="dataForm.loginName" placeholder="请填写登入账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登入密码" prop="password">
              <el-input v-model="dataForm.password" placeholder="请填写登入密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="所属停车场" prop="parkingId">
              <el-select v-model="dataForm.parkingId" class="m-2" placeholder="选择所属停车场" style="width:100%">
                <el-option v-for="item in parkName" :key="item.id" :label="item.parkName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人名称" prop="contacts">
              <el-input v-model="dataForm.contacts" placeholder="至少输入2个字"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="telephone">
              <el-input v-model="dataForm.telephone" placeholder="请填写联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折扣" prop="discount">
              <el-input v-model="dataForm.discount" placeholder="85代表8.5折,100代表无折扣"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商家描述" prop="merchantDescribe">
              <el-input v-model="dataForm.merchantDescribe" :rows="2" type="textarea" placeholder="请填写商家描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商家Logo" prop="logo">
              <imageUpload v-model="dataForm.logo"></imageUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addObj, getObj, putObj } from '@/api/operate/merchant.js'
export default {
  props: ["parkName"],
  data () {
    return {
      visible: false,
      titleRegion: null,
      dataForm: {},
      dataRule: [],
      dataRule: {
        name: [
          { required: true, message: '商家名称不能为空', trigger: 'blur' }
        ],
        loginName: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '登录密码不能为空', trigger: 'blur' }
        ],
        parkingId: [
          { required: true, message: '所属停车场', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    init (id) {
      if (id == undefined) {
        this.titleRegion = '新增'
      } else {
        this.titleRegion = '修改'
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (id) {
            getObj(id).then((response) => {
              this.dataForm = response.data.data
            }).catch(() => { })
          }
        })
      }
      this.visible = true
    },
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.titleRegion == '修改') {
            putObj(this.dataForm).then(data => {
              this.$notify.success('修改成功')
              this.visible = false
              this.$emit('refreshDataList')
            })
          } else {
            addObj(this.dataForm).then(data => {
              this.$notify.success('添加成功')
              this.visible = false
              this.$emit('refreshDataList')
            })
          }
        }
      })
    },
    close () {
      this.visible = false
      this.dataForm = {}
    },
    closeDialog () {
      this.dataForm = {}
      this.$refs["dataForm"].resetFields()
    }
  },
}
</script>

<style>
</style>